React Native — Accessibility Props and Performance Issues

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

accessibilityValue

We can add the accessibilityValue prop to describe the component’s state.

Its value is an object that can have some properties:

• min — min value of a component’s range
• max— max value of a component’s range
• now — current value of a component’s range
• text — text description of the component’s value

min , max , and now are integers and text is a string.

importantForAccessibility

The importantForAccessibility prop is only available to Android apps.

It controls whether a view fires accessibility events and if it’s reported to accessibility services.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View accessible={true} importantForAccessibility="yes" style={styles.container}>
      <Text>
        hello world
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

onAccessibilityTap

onAccessibilityTap prop takes a function that’s called when someone activates an accessible element by double-tapping.

Accessibility Actions

We can add accessibility actions that let assistive technology programmatically invoke the actions of a component.

A component must define a list of actions it supports via the accessbilityActions property.

And it must implement the onAccessbilityAction function to handle action requests.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View
      accessible={true}
      accessibilityActions={[
        { name: 'cut', label: 'cut' },
        { name: 'copy', label: 'copy' },
        { name: 'paste', label: 'paste' }
      ]}
      onAccessibilityAction={(event) => {
        switch (event.nativeEvent.actionName) {
          case 'cut':
            Alert.alert('Alert', 'cut action success');
            break;
          case 'copy':
            Alert.alert('Alert', 'copy action success');
            break;
          case 'paste':
            Alert.alert('Alert', 'paste action success');
            break;
        }
      }}
      style={styles.container}
    >
      <Text>
        hello world
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

We add the props to our View so that we can show the alerts when those actions are executed.

Performance Problems

We should be careful when we’re creating our app.

One common source of slow performance is running our app in dev mode.

We should make sure we don’t do that with the production version.

Using console.log also slows down our app.

We should remove them as debugging.

When we want to use ListView s, we should replace them with FlatList or SectionList so that we get faster performance.

If we’re using ListView s, we should provide the rowHasChanged function checks whether the row has changed and needs to be re-rendered.

If we’re using touchable views, we won’t see any effect until the onPress function has returned.

If we set the state in the onPress function, then the touchable component may not look very responsive.

We can wrap our onPress actions in a requestAnimationFrame callback.

For example, we can write:

import React from 'react';
import { View, StyleSheet, TouchableNativeFeedback, Text } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback
        onPress={() => {
          requestAnimationFrame(() => {
            alert('You tapped the button!');
          });
        }}
      >
        <View style={styles.button}>
          <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to callrequestAnimationFrame in our onPress callback.

Conclusion

We can add accessibility props and fix common performance problems easily with React Native.